﻿<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title>鼠标滑过图片时预览大图</title>
	<!--   引入jQuery -->
	<script src="js/jquery-1.12.4.js" type="text/javascript"></script>
	<style type="text/css">
		body {
			margin: 0;
			padding: 40px;
			background: #fff;
			font: 80% Arial, Helvetica, sans-serif;
			color: #555;
			line-height: 180%;
		}

		img {
			border: none;
		}

		ul,
		li {
			margin: 0;
			padding: 0;
		}

		li {
			list-style: none;
			float: left;
			display: inline;
			margin-right: 10px;
			border: 1px solid #AAAAAA;
		}

		/* tooltip */
		#tooltip {
			position: absolute;
			border: 1px solid #ccc;
			background: #333;
			padding: 2px;
			display: none;
			color: #fff;
		}
	</style>
	<script type="text/javascript">
		$(function () {
			//todo
			$(function () {
			var x = 10;
			var y = 20;
			$("a.tooltip").mouseover(function (e) {
				var tooltip = "<div id='tooltip'><img src='" + this.href + "' alt='产品预览图'/><br/>" + this.title + "</div>"; //创建 div 元素
				$("body").append(tooltip);	//把它追加到文档中						 
				$("#tooltip")
					.css({
						"top": (e.pageY + y) + "px",
						"left": (e.pageX + x) + "px"
					}).show("fast");	  //设置x坐标和y坐标，并且显示
			}).mouseout(function () {
				$("#tooltip").remove();	 //移除 
			}).mousemove(function (e) {
				$("#tooltip")
					.css({
						"top": (e.pageY + y) + "px",
						"left": (e.pageX + x) + "px"
					});
			});
		})
		})
	</script>

</head>

<body>
	<ul>
		<li><a href="images/012.jpg" class="tooltip" title="拉萨效外"><img src="images/011.jpg" alt="拉萨效外" /></a></li>
		<li><a href="images/022.jpg" class="tooltip" title="圣湖的传说"><img src="images/021.jpg" alt="圣湖的传说" /></a></li>
		<li><a href="images/032.jpg" class="tooltip" title="童话九寨沟"><img src="images/031.jpg" alt="童话九寨沟" /></a></li>
		<li><a href="images/042.jpg" class="tooltip" title="丹巴藏寨"><img src="images/041.jpg" alt="丹巴藏寨" /></a></li>
	</ul>
</body>

</html>